// 管理路由的文件夹，路由的代码都在这里

// 导入依赖
import Vue from 'vue';
import VueRouter from 'vue-router'

// 懒加载：当即将查看这个组件时，才会加载组件，节省首屏加载的时间。只有调用函数时，才会指定import的代码
// 导入组件
const comRef = () => import('../components/comRef.vue')
const comMixin = () => import('../components/comMixin.vue')
const comIs = () => import('../components/comIs.vue')
const Contact = () => import('../components/Contact.vue')
const notFound = () => import('../components/notFound.vue')
const index = () => import('../components/index.vue')
const songList = () => import('../components/songList.vue')
const detail = () => import('../components/detail.vue')
const axios = () => import('../components/axios.vue')
const element = () => import('../components/element.vue')
const vant = () => import('../components/vant.vue')
const vuex = () => import('../components/vuex.vue')

// 使用中间件
Vue.use(VueRouter);

// 路由表，是一个数组，里面是url和组件的对应关系.里面是一个一个的路由对象route
const routes = [
  {
    path: '/comref',
    component: comRef,
    meta: {
      title: 'ref组件'
    }
  },
  {
    path: '/commixin',
    component: comMixin,
    // 元信息
    meta: {
      title: 'mixin组件'
    }
  },
  {
    path: '/comis',
    component: comIs,
    meta: {
      title: 'is组件'
    }
  },
  {
    // 登陆后可以查看
    path: '/songlist',
    component: songList,
    meta: {
      title: '歌曲列表'
    }
  },
  {
    path: '/axios',
    component: axios,
    meta: {
      title: 'axios'
    }
  },
  {
    path: '/element',
    component: element,
    meta: {
      title: 'element的使用'
    }
  },
  {
    path: '/vant',
    component: vant,
    meta: {
      title: 'vant的使用'
    }
  },
  {
    path: '/vuex',
    component: vuex,
    meta: {
      title: 'vuex的使用'
    }
  },
  {
    // 登陆后可以查看
    path: '/detail/:id', // 动态路由，路由地址中有变量
    component: detail,
    // 路由独享的守卫
    beforeEnter(to, from, next) {
      let isLogin = JSON.parse(localStorage.getItem('isLogin'));
      if(isLogin) {
        next()
      }else {
        next('/index')
      }
    }
  },
  {
    path: '/contact',
    component: Contact
  },
  {
    path: '/index',
    component: index
  },
  // 以下是命名视图
  // {
  //   path: '/index',
  //   name: 'one', // 路由的名字，命名路由
  //   components: {
  //     // 命名视图，对应的组件要改为components，值是一个对象，分别对应命名视图中的各个部分
  //     top: index,
  //     bot: songList
  //   }
  // },
  // 以上是命名视图
  // 404的处理方式1
  // {
  //   path: '*', // 通配符，匹配所有路径
  //   component: notFound
  // }
  // ===============================
  // 404的处理方式2，重定向
  {
    path: '/404',
    component: notFound
  },
  {
    path: '*',
    redirect: '/404'
  }
]

// 声明路由实例
const router = new VueRouter({
  // 路由模式
  mode: 'history', // hash是默认的模式；history是常用的模式
  // 路由表，路由的规则
  routes: routes,
  // 滚动行为
  scrollBehavior (to, from, savedPosition) {
    console.log(savedPosition);
    return {
      x: 0, // 水平位置
      y: 100 // 竖直位置
    }
  }
});

// 处理NavigationDuplicated: Avoided redundant navigation to current location报错
// 报错原因是路由重复，处理的原理是捕获错误
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

// 全局前置路由守卫
router.beforeEach((to, from, next) => {
  console.log(111111, to);
  // to 即將进入的路由对象
  // from 正在离开的路由对象
  document.title = to.meta.title || 'demo';
  if (to.path === '/songlist') { // songlist页面登陆后才能查看
    let isLogin = JSON.parse(localStorage.getItem('isLogin'));
    console.log(666, isLogin);
    if (isLogin) {
      // 已经登录,继续访问
      next()
    } else {
      //  没有登录，返回首页
      next('/index')
    }
  } else {
    // 将执行权交给下一个中间件
    // next的括号为空，表示继续执行，不做额为操作
    next()
  }
})
// 全局解析守卫
router.beforeResolve((to, from, next)=>{
  console.log(11, to);
  console.log(22, from);
  next()
});
// 全局后置守卫
router.afterEach((to, from) => {
  console.log('我在离开'+from.path+'页面时执行');
})
export default router;

